<template>
  <view class="login-account">
    <view class="header">
      <u-navbar
        :placeholder="true"
        bgColor="transparent"
        title=" "
        leftIcon=" "
        :autoBack="true"
        :safeAreaInsetTop="true"></u-navbar>

      <view class="column-flex-center header-box">
        <image src="/static/image/logob.png" mode="aspectFit"></image>
        <view class="">欢迎来到E校通</view>
      </view>
    </view>
    <view class="wrap">
      <view class="box flex-between">
        <input type="tel" placeholder="请输入手机号" v-model="phone" />
        <image
          v-show="phone"
          src="/static/image/clear.png"
          mode="aspectFit"
          class="icon1"
          @click="phone = ''"></image>
      </view>
      <view class="box flex-between">
        <template v-if="show">
          <input
            class="inp"
            type="number"
            placeholder="请输入密码"
            v-model="pass" />
        </template>
        <template v-else>
          <input
            class="inp"
            type="password"
            placeholder="请输入密码"
            v-model="pass" />
        </template>
        <view class="flex">
          <image
            v-show="pass"
            src="/static/image/clear.png"
            mode="aspectFit"
            class="icon1"
            @click="pass = ''"></image>
          <image
            v-show="!show && pass"
            src="/static/image/eye.png"
            mode="aspectFit"
            class="icon"
            @click="show = !show"></image>
          <image
            v-show="show && pass"
            src="/static/image/eye-s.png"
            mode="aspectFit"
            class="icon"
            @click="show = !show"></image>
        </view>
      </view>
      <view class="t" @click="this.toRoute('/login-phone')">忘记密码</view>
    </view>
    <view :class="['btn', phone && pass ? 'ac' : '']">登录</view>
    <view class="footer-terms flex-center">
      <view class="terms-box flex-center" @click="is_agree = !is_agree">
        <image
          class="image-check"
          v-if="!is_agree"
          src="@/static/common/radio0.png"
          mode=""></image>
        <image
          class="image-check"
          v-if="is_agree"
          src="@/static/image/check.png"
          mode=""></image>
        <text>登录即同意</text>
      </view>
      <text @click="toTerms()" class="terms-text">《E校通用户隐私协议》</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      pass: "",
      show: false,
    };
  },
  methods: {},
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.login-account {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .header {
    margin-bottom: 62upx;
    &-box {
      font-weight: bold;
      font-size: 40rpx;
      color: #f49c0d;
      margin-top: 34upx;
      & > image {
        width: 174upx;
        height: 174upx;
        margin-bottom: 24upx;
      }
    }
  }
  .wrap {
    padding: 0 32upx;
  }
  .box {
    width: 100%;
    height: 88rpx;
    background: #f6f6f6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    box-sizing: border-box;
    padding: 0 24upx;
    margin: 0 auto 24upx;

    .inp {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
    }
  }
  .t {
    font-size: 24rpx;
    color: #666666;
  }
  .btn {
    width: 686rpx;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    text-align: center;
    line-height: 80upx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.4;
    margin: 68upx auto 0;
  }
  .ac {
    opacity: 1;
  }
  .footer-terms {
    margin-top: 568upx;

    .terms-box {
      font-weight: 500;
      font-size: 24rpx;
      color: #000000;
      .image-check {
        margin-right: 10rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }

    .terms-text {
      color: #f49c0d;
    }
  }
  .icon {
    width: 24upx;
    height: 20upx;
    margin-left: 24upx;
  }
  .icon1 {
    width: 24upx;
    height: 24upx;
  }
}
</style>
